<template>
  <div>
    <dir>
      <el-row :gutter="10" style="margin-bottom: 60px">
        <el-col :span="6">
          <el-card style="color: #409eff">
            <div style="display: flex; align-items: center">
              <el-icon> <user-filled /> </el-icon>用户总数
            </div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              100
            </div></el-card
          >
        </el-col>
        <el-col :span="6">
          <el-card style="color: #f56c6c">
            <div style="display: flex; align-items: center">
              <el-icon> <money /> </el-icon>销售总量
            </div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              ￥1000000
            </div></el-card
          >
        </el-col>
        <el-col :span="6">
          <el-card style="color: #67c23a">
            <div style="display: flex; align-items: center">
              <el-icon>
                <credit-card />
              </el-icon>
              收益总额
            </div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              ￥300000
            </div></el-card
          >
        </el-col>
        <el-col :span="6">
          <el-card style="color: #e6a23c">
            <div style="display: flex; align-items: center">
              <el-icon>
                <shop />
              </el-icon>
              门店总数
            </div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              100
            </div></el-card
          >
        </el-col>
      </el-row>
    </dir>
    <el-row>
      <el-col :span="12">
        <div id="main" style="width: 500px; height: 450px"></div>
      </el-col>
      <el-col :span="12">
        <div id="pie" style="width: 500px; height: 400px"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "Home",
  data() {
    return {};
  },
  mounted() {
    //div页面元素创建好后执行 mounted

    var option = {
      title: {
        text: "各季度会员数量统计",
        subtext: "趋势图",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      xAxis: {
        type: "category",
        data: ["第一季度", "第二季度", "第三季度", "第四季度"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "星巴克",
          data: [],
          type: "line",
        },
        {
          name: "星巴克",
          data: [],
          type: "bar",
        },
        {
          name: "瑞幸咖啡",
          data: [],
          type: "line",
        },
        {
          name: "瑞幸咖啡",
          data: [],
          type: "bar",
        },
      ],
    };
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);

    // pie饼图

    var pieOption = {
      title: {
        text: "各季度会员数量统计",
        subtext: "比例图",
        left: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "星巴克",
          type: "pie",
          radius: "60%",
          center: ["25%", "50%"],
          data: [],
          label: {
            normal: {
              show: true,
              position: "inner",
              textStyle: {
                fontWeight: 200,
                fontSize: 14, //文字的字体大小
                color: "#fff", //文字颜色
              },
              formatter: "{d}%" /*饼状图内显示百分比*/,
              // data:['40%','60%'],
            },
          },

          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        {
          name: "瑞幸咖啡",
          type: "pie",
          radius: "60%",
          center: ["75%", "50%"],
          data: [
            { value: 4, name: "第一季度" },
            { value: 5, name: "第二季度" },
            { value: 6, name: "第三季度" },
            { value: 7, name: "第四季度" },
          ],
          label: {
            normal: {
              show: true,
              position: "inner",
              textStyle: {
                fontWeight: 200,
                fontSize: 14, //文字的字体大小
                color: "#fff", //文字颜色
              },
              formatter: "{d}%" /*饼状图内显示百分比*/,
              // data:['40%','60%'],
            },
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    var pieChartDom = document.getElementById("pie");
    var pieMyChart = echarts.init(pieChartDom);

    this.request.get("/echarts/members").then((res) => {
      // 填空
      //option.xAxis.data = res.data.x;
      // option.series[0].data = res.data.y;
      // option.series[1].data = res.data.y;
      option.series[0].data = res.data;
      option.series[1].data = res.data;

      option.series[2].data = [5, 6, 7, 8];
      option.series[3].data = [5, 6, 7, 8];

      // 数据准备未必之后再set
      myChart.setOption(option);

      // pie饼图
      pieOption.series[0].data = [
        { value: res.data[0], name: "第一季度" },
        { value: res.data[1], name: "第二季度" },
        { value: res.data[2], name: "第三季度" },
        { value: res.data[3], name: "第四季度" },
      ];
      pieMyChart.setOption(pieOption);
    });
  },
};
</script>
<style scoped></style>
